<template>
  <div id="skillsTraining" class="person-detail">
    <div>
      <van-nav-bar title="技能培训" :fixed="true" left-arrow @click-left="back" />
    </div>
    <div>
      <div class="skillsTraining-search">
        <van-search placeholder="请输入搜索关键词" v-model="value" @input="search()" />
      </div>
      <div>
        <van-dropdown-menu>
          <van-dropdown-item v-model="value1" :options="option1" @change="changeCourse" />
          <van-dropdown-item v-model="value2" :options="option2" @change="changeTime" />
        </van-dropdown-menu>
      </div>
      <div class="skillsTraining-body">
        <van-grid :gutter="10" :column-num="1">
          <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
              <van-grid-item v-for="(ite, index) in publicServiceList" :key="index" @click.native="integralClick(ite)">
                <video-player class="video-player-box video" ref="videoPlayer" :options="ite.playerOptions"
                  :playsinline="true" style="width:150px;height:120px;">
                </video-player>

                <div class="employmentTraining-training-de">
                  <div class="employmentTraining-training-name">
                    <p>{{ ite.subject }}</p>
                    <p>{{ ite.description }}</p>
                  </div>
                  <div class="employmentTraining-training-count">
                    <van-icon v-if="ite.viewCount == 0" name="good-job-o" size="16px" />
                    <van-icon v-if="ite.count > 0" name="good-job-o" size="16px" color="red" />
                    <span>观看:{{ ite.viewCount }}次</span>
                  </div>
                </div>
              </van-grid-item>
            </van-list>
          </van-pull-refresh>
        </van-grid>
      </div>
    </div>
  </div>
</template>
<script>
  import mine from "../../../../controller/mine";
  import constant from "@/controller/constant.js";
  export default {
    name: "feedBack",
    components: {},
    data() {
      return {
        loading: false,
        finished: false,
        isLoading: false,
        count1: 1,
        value: "",
        value1: " ",
        value2: "0",
        option1: [{
          text: "全部",
          value: ' '
        }, ],
        option2: [{
            text: "最新",
            value: "0"
          },
          {
            text: "点赞最多",
            value: "1"
          }
        ],
        publicServiceList: []
      };
    },
    computed: {},
    created() {},
    mounted() {
      this.getCourseInfo()
    },
    methods: {
      changeCourse() {
        this.publicServiceList = []
        this.count1 = 1
        this.getInfo()
      },
      changeTime() {
        this.publicServiceList = []
        this.count1 = 1
        this.getInfo()
      },
      search() {
        this.publicServiceList = []
        this.count1 = 1
        this.getInfo()
      },

      onRefresh() {
        this.publicServiceList = []
        this.count1 = 1
        this.getInfo();
      },
      getCourseInfo() {
        let that = this
        mine.training_courseCategory_getAll().then(res => {
          if (res.code == "0") {
            if (res.datas != null) {
              if (res.datas.length > 0) {
                res.datas.forEach(item => {
                  let obj = {
                    text: item.categoryName,
                    value: item.id
                  }
                  that.option1.push(obj)
                })
              }
            }
          } else {
            this.$toast(res.msg);
          }
        })
      },
      onLoad() {
        this.getInfo();
      },
      getInfo() {
        let data = {
          subject: this.value,
          categoryId: this.value1,
          sort: parseInt(this.value2),
          curPage: this.count1,
          pageSize: (this.count1) * 10
        };
        mine.training_course_page(data).then(res => {
          if (res.code === "0") {
            if (
              (res.datas && res.datas.records.length === 0) ||
              res.datas === null
            ) {
              this.loading = false;
              this.isLoading = false;
              this.finished = true;
              return;
            }
            res.datas.records.forEach((element, index) => {
              let arr = {
                autoplay: true, //如果true,浏览器准备好时开始回放。
                muted: true, // 默认情况下将会消除任何音频。
                loop: true, // 导致视频一结束就重新开始。
                preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
                language: 'zh-CN',
                aspectRatio: '4:3', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
                fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
                sources: [{
                  type: "video/mp4",
                  src: element.videoUrl
                }],
                //poster: "poster.jpg", //你的封面地址
                width: document.documentElement.clientWidth,
              }
              res.datas.records[index]["playerOptions"] = arr
            })
            this.publicServiceList = [...this.publicServiceList, ...res.datas.records];
            this.$nextTick(() => {
              this.loading = false;
              this.isLoading = false;
            });
            if (res.datas.records.length < (this.count1) * 10) {
              this.finished = true;
            }
          } else {
            if (res && res.msg) {
              this.$toast(res.msg);
            } else {
              this.$toast(constant.unusualMsg);
            }
          }
        });
      },
      back() {
        this.$router.go(-1);
      },
      integralClick(val) {
        this.$router.push({
          path: "/work/employmentTraining/skillTrainingDetails",
          query: {
            id: val.id
          }
        });
      }
    }
  };
</script>
<style lang="scss">
  #skillsTraining {
    background: #fff;

    .skillsTraining-body {
      padding: 10px 0;
    }

    .employmentTraining-training-de {
      margin-top: 5px;
      padding-left: 20px;
    }

    .employmentTraining-training-name {
      font-size: 14px;

      >p:nth-child(1) {
        font-weight: bold;
      }

      >p:nth-child(2) {
        font-weight: 300;
        margin-top: 10px;
      }
    }

    .employmentTraining-training-count {
      margin-top: 40px;

      >span {
        margin-left: 5px;
        font-size: 14px;
      }
    }

    p {
      margin: 0;
    }

    .van-grid-item__content {
      flex-direction: row;
      align-items: end;
      justify-content: end;
      padding: 5px 10px;
      width: 330px;
    }

    .video-js .vjs-big-play-button {
      width: 2em;
    }

    /deep/ .van-nav-bar--fixed {
      z-index: 2 !important;
    }
  }
</style>